<template>
    <div :style="style" class="vux-flexbox-item">
        <slot />
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref, getCurrentInstance } from 'vue';
const prefixList = ['-moz-box-', '-webkit-box-', ''];
interface Style {
    [propName: string]: any;
}
export default defineComponent({
    props: {
        span: [Number, String],
        order: [Number, String]
    },
    setup(props) {
        const instance = getCurrentInstance();
        const parent: any = instance?.parent;
        const bodyWidth: any = ref(0);
        const style = computed(() => {
            const { span, order } = props;
            const styles: Style = {};
            const marginName = parent.orient === 'horizontal' ? 'marginLeft' : 'marginTop';
            if (parent.gutter * 1 !== 0) {
                styles[marginName] = `${parent.gutter}px`;
            }
            if (span) {
                for (let i = 0; i < prefixList.length; i++) {
                    styles[`${prefixList[i]}flex`] = `0 0 ${buildWidth(span as any) * 100}%`;
                }
            }
            if (typeof order !== 'undefined') {
                styles.order = order;
            }
            return styles;
        });
        const buildWidth = (width?: string | number): any => {
            if (typeof width === 'number') {
                if (width < 1) {
                    return width;
                } else {
                    return width / 12;
                }
            } else if (typeof width === 'string') {
                return +(width as string).replace('px', '') / bodyWidth.value;
            }
        };
        onBeforeMount(() => {
            bodyWidth.value = document.documentElement.offsetWidth;
        });
        return {
            style,
            bodyWidth,
            buildWidth
        };
    }
});
</script>
